<template>
  <picker @select="handleSelect(arguments)" :data="linkageData" :selected-index="selectedIndex"
          ref="picker" :title="title" @change="handleChange" :cancelTxt="cancelTxt" :confirmTxt="confirmTxt"></picker>
</template>

<script>
import picker from './picker'

const COMPONENT_NAME = 'date-picker'

export default {
  props: {
    minDate: {
      type: Date,
      default: new Date()
    },
    maxDate: {
      type: Date,
      default: new Date(new Date().getFullYear() + 10, 0, 0)
    },
    title: {
      type: String
    },
    selectedIndex: {
      type: Array,
      default: [0, 0, 0]
    },
    cancelTxt: {
      type: String
    },
    confirmTxt: {
      type: String
    }
  },
  data () {
    return {
      tempIndex: [0, 0, 0],
      year: [],
      month: []
    }
  },
  created() {
    this.init()
  },
  computed: {
    linkageData () {
      const day = []
      let month = []
      const maxY = this.maxDate.getFullYear()
      const maxM = this.maxDate.getMonth()
      const minY = this.minDate.getFullYear()
      const minM = this.minDate.getMonth()
      const currY = this.year[this.tempIndex[0]].value
      const currM = this.month[this.tempIndex[1]].value
      const flagY = maxY === currY
      const flagM = maxM === currM
      if (!this.tempIndex[0]) {
        for (var i = minM; i <= 11; i++) {
          month.push({
            text:i<9?`0${i+1}`:`${i+1}`,
            value: i
          })
        }
      } else if (flagY) {
        for (var i = 0; i <= maxM; i++) {
          month.push({
            text:i<9?`0${i+1}`:`${i+1}`,
            value: i
          })
        }
      } else {
        month = this.month
      }
      if (!this.tempIndex[0] && !this.tempIndex[1]) {
        for (var i = this.minDate.getDate(); i <= new Date(minY,minM+1,0).getDate(); i++) {
          day.push({
            text:i<9?`0${i}`:`${i}`,
            value: i
          })
        }
      } else {
        const currD = flagY && flagM ? this.maxDate.getDate() : new Date(currY,currM+1,0).getDate()
        for (var i = 1; i <= currD; i++) {
          day.push({
            text:i<9?`0${i}`:`${i}`,
            value: i
          })
        }
      }
      return [this.year, month, day]
    }
  },
  watch: {
    minDate() {
      this.init()
    },
  },
  methods: {
    init() {
      const startY = this.minDate.getFullYear()
      const endY = this.maxDate.getFullYear()
      this.tempIndex = this.selectedIndex
      for (var i = startY; i <= endY; i++) {
        this.year.push({
          text: i,
          value: i
        })
      }
      for (var i = 0; i <= 11; i++) {
        this.month.push({
          text: i<9?`0${i+1}`:`${i+1}`,
          value: i
        })
      }
    },
    show() {
      this.$refs.picker.setData(this.linkageData)
      this.$refs.picker.show()
    },
    handleSelect(args) {
      this.$emit('select', ...args)
    },
    handleChange(i, newIndex) {
      if (newIndex !== this.tempIndex[i]) {
        for (let j = 2; j > i; j--) {
          this.tempIndex.splice(j, 1, 0)
          this.$refs.picker.scrollTo(j, 0)
        }
        this.tempIndex.splice(i, 1, newIndex)
      }
    }
  },
  components: {
    picker
  }
}
</script>

<style>
</style>
